<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SelectFeature Control on Layer.Vector</title> 
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #controlToggle li {
            list-style: none;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, drawControls;
        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
        function init(){
            map = new OpenLayers.Map('map');
            var wmsLayer = new OpenLayers.Layer.WMS(
                "OpenLayers WMS", 
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}
            ); 

            var vectors = new OpenLayers.Layer.Vector("Vector Layer");
            map.addLayers([wmsLayer, vectors]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            
            drawControls = {
                point: new OpenLayers.Control.DrawFeature(
                    vectors, OpenLayers.Handler.Point
                ),
                line: new OpenLayers.Control.DrawFeature(
                    vectors, OpenLayers.Handler.Path
                ),
                polygon: new OpenLayers.Control.DrawFeature(
                    vectors, OpenLayers.Handler.Polygon
                ),
                select: new OpenLayers.Control.SelectFeature(
                    vectors,
                    {
                        clickout: false, toggle: false,
                        multiple: false, hover: false,
                        toggleKey: "ctrlKey", // ctrl key removes from selection
                        multipleKey: "shiftKey", // shift key adds to selection
                        box: true
                    }
                ),
                selecthover: new OpenLayers.Control.SelectFeature(
                    vectors,
                    {
                        multiple: false, hover: true,
                        toggleKey: "ctrlKey", // ctrl key removes from selection
                        multipleKey: "shiftKey" // shift key adds to selection
                    }
                )
            };
            
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        }

        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }

        function update() {
            var clickout = document.getElementById("clickout").checked;
            drawControls.select.clickout = clickout;
            var hover = document.getElementById("hover").checked;
            drawControls.select.hover = hover;
            drawControls.select.box = document.getElementById("box").checked;
            if(drawControls.select.active) {
                drawControls.select.deactivate();
                drawControls.select.activate();
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">OpenLayers Select Feature Example</h1>
    <p id="shortdesc">
      Select a feature on hover or click with the Control.SelectFeature on a
      vector layer.
    </p>  
    <div id="map" class="smallmap"></div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate</label>
        </li>
        <li>
            <input type="radio" name="type" value="point" id="pointToggle"
                   onclick="toggleControl(this);" />
            <label for="pointToggle">draw point</label>
        </li>
        <li>
            <input type="radio" name="type" value="line" id="lineToggle"
                   onclick="toggleControl(this);" />
            <label for="lineToggle">draw line</label>
        </li>
        <li>
            <input type="radio" name="type" value="polygon" id="polygonToggle"
                   onclick="toggleControl(this);" />
            <label for="polygonToggle">draw polygon</label>
        </li>
        <li>
            <input type="radio" name="type" value="selecthover" id="selecthoverToggle"
                   onclick="toggleControl(this);" />
            <label for="selecthoverToggle">Select features on hover</label>
        </li>
        <li>
            <input type="radio" name="type" value="select" id="selectToggle"
                   onclick="toggleControl(this);" />
            <label for="selectToggle">select feature</label>
            <ul>
                <li>
                    <input id="box" type="checkbox" checked="checked"
                           name="box" onchange="update()" />
                    <label for="box">select features in a box</label>
                </li>
                <li>
                    <input id="clickout" type="checkbox"
                           name="clickout" onchange="update()" />
                    <label for="clickout">click out to unselect features</label>
                </li>
            </ul>
        </li>
    </ul>
    <p>Use the shift key to select multiple features.  Use the ctrl key to
    toggle selection on features one at a time.  Note: the "clickout" option has no
    effect when "hover" is selected.</p>
  </body>
</html>
